<template>
  <div class="new_list">
    <div class="rank_list" v-for="(item, index) in lists" :key="index">
      <div class="new_list_1">
        <div class="new_list_head">
          <h5>{{ item.tj }}</h5>
          <p class="new_list_more"><a href="hotbooks.html">更多 +</a></p>
        </div>
        <hr />
        <ul class="list_3">
          <li>
            <div class="list_1">
              <div class="list_1_right">
                <h3>NO.1</h3>
                <h4>
                  <a href="booksdetails.html">{{ item.book1 }}</a>
                </h4>
                <p><em>1888</em>推荐</p>
                <p>
                  <a href="">长篇小说</a>
                  <a href="">讽刺</a>
                </p>
              </div>
              <div class="list_1_left">
                <a href="booksdetails.html"
                  ><img :src="item.path" style="width: 110px; height: 100px"
                /></a>
              </div>
            </div>
          </li>
          <li class="data_rid_2">
            <div class="num-box">
              <span class="num2">2</span>
            </div>
            <div class="nama-box">
              <a href="booksdetails.html">{{ item.book2 }}</a>
              <i class="total">1565</i>
            </div>
          </li>
          <li class="data_rid_2">
            <div class="num-box">
              <span class="num3">3</span>
            </div>
            <div class="nama-box">
              <a href="booksdetails.html">{{ item.book3 }}</a>
              <i class="total">1131</i>
            </div>
          </li>
          <li class="data_rid_2">
            <div class="num-box">
              <span class="num4">4</span>
            </div>
            <div class="nama-box">
              <a href="">{{ item.book4 }}</a>
              <i class="total">899</i>
            </div>
          </li>
          <li class="data_rid_2">
            <div class="num-box">
              <span class="num4">5</span>
            </div>
            <div class="nama-box">
              <a href="">{{ item.book5 }}</a>
              <i class="total">681</i>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: [
        {
          tj: "教授推荐",
          book1: "麦田里的守望者",
          book2: "追风筝的人",
          book3: "第七天",
          book4: "别相信任何人",
          book5: "活着",
          path: require("../assets/tjimg/maitian.jpg"),
        },
        {
          tj: "新书推荐",
           book1: "第七天",
          book2: "逃离",
          book3: "天黑以后",
          book4: "以自己喜欢的方式过一生",
          book5: "霍乱时期的爱情",
         
          path: require("../assets/tjimg/diqi.jpg"),
        },
        {
          tj: "周推荐榜",
          book1: "解忧杂货店",
          book2: "三毛全集：撒哈拉的故事",
          book3: "谢谢你离开我",
          book4: "世界上的另一个你",
          book5: "以自己喜欢的方式过一生",
          path: require("../assets/tjimg/jieyou.jpg"),
        },
        {
          tj: "外借排行榜",
          book1: "别相信任何人",
          book2: "爱情和其他魔鬼",
          book3: "岛",
          book4: "百年孤独",
          book5: "我所理解的生活",
          path: require("../assets/tjimg/biexiangxin.jpg"),
        },
      ],
    };
  },
};
</script>

<style>
/*消息推荐*/
.new_list{
    display: flex;
    flex-direction: row;
  
}
.new_list a {
  text-decoration: none !important;
  color: #1a1a1a;
}
.new_list ul {
  padding: 0;
  margin: 0;
}
.new_list hr {
  margin-top: 0;
  margin-bottom: 10px;
  border-top: 1px solid #717171;
  width: 95%;
}
.rank_list {
  width: 270px;
  height: 305px;
  margin-left: 19px;
}
.new_list_head {
  width: 268px;
  height: 35px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}
.new_list_head h5 {
  position: relative;
  top: -10px;
  font-size: 15px;
}
.new_list_head:hover p {
  display: block;
}
.new_list_more {
  display: inline;
  left: 120px;
  position: relative;
  top: 8px;
  display: none;
}
.new_list_more a {
  color: #3aa3f9;
}
.new_list :nth-child(1) {
  margin-left: 1px;
}
.list_1 {
  height: 110px;
  width: 220px;
}
.list_1 div {
  float: left;
}
.list_1_right {
  width: 80px;
  margin-top: -10px;
}
.list_1_left {
  position: relative;
  left: 30px;
}
.list_1_right h3 {
  width: 36px;
  font: 700 14px/18px Arial;
  color: #fff;
  background: red;
}
.list_1_right h4 {
  width: 120px;
  font: 700 14px/18px Arial;
  margin-bottom: 0px;
}
.list_1_right p:nth-child(3) {
  font: 700 12px/15px Arial;
  height: 10px;
  margin-top: 8px;
  margin-bottom: 0;
  color: red;
}
.list_1_right em {
  padding-right: 5px;
  font-size: 16px;
}
p:last-child {
  margin-top: 8px;
}
.list_1_right p:nth-child(4) a {
  /*font:700 12px/15px Arial;*/
  font-size: 12px;
  height: 10px;
  color: #a6a6a6;
  margin-bottom: 8px;
}

/*推荐列表*/
.new_list {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}
.num-box {
  float: left;
  width: 28px;
  height: 32px;
}
.num-box span {
  font: 700 14px/18px Arial;
  display: block;
  overflow: hidden;
  width: 23px;
  height: 16px;
  margin-top: 8px;
  text-align: center;
  letter-spacing: -1px;
}
.data_rid_2 {
  width: 220px;
  height: 32px;
}
.num-box span.num2 {
  width: 16px;
  height: 16px;
  color: white;
  background: #e67225;
  font: 700 14px/16px Arial;
  margin-top: 5px;
  margin-left: 5px;
}
.nama-box {
  position: relative;
  float: left;
  height: 32px;
  width: 180px;
  border-top: 1px solid #e6e6e6;
  margin-left: 30px;
}
.nama-box a {
  display: inline-block;
  overflow: hidden;
  height: 31px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1a1a1a;
  width: 110px;
}
.total {
  font: 14px/25px PingFangSC-Regular, "-apple-system", Simsun;
  float: right;
  overflow: hidden;
  width: 32px;
  text-align: right;
  white-space: normal;
  text-overflow: ellipsis;
  color: #b3b3b3;
}

.num-box span.num3 {
  width: 16px;
  height: 16px;
  color: white;
  background: #e6bf25;
  font: 700 14px/16px Arial;
  margin-top: 5px;
  margin-left: 5px;
}
.num-box span.num4 {
  width: 16px;
  height: 16px;
  color: white;
  background: #ededed;
  font: 700 14px/16px Arial;
  margin-top: 5px;
  margin-left: 5px;
}
.data_rid_2 {
  position: relative;
}
.num-box {
  position: absolute;
  left: 0;
  top: 11px;
}
.new_list{
    margin-top: 10px;
  
}
</style>